<script setup lang="ts">
	// tabs
	import { onMounted, reactive, ref, toRef } from "vue";
	import { DATA_MAIN_EXPLORE_LIVE, DATA_MAIN_EXPLORE_MINIMOVIE, DATA_MAIN_EXPLORE_TABS, DATA_MAIN_HOME_MY_TABS_MENU, DATA_MAIN_HOME_MY_TABS_MENU_RECOMMEND } from "../../utils/data"
	import { mainHomeExploreScrollViewStyle, mainHomeExplorePlacehoderStyle, editTabsMenuStyle, mainHomeExploreTabsHeight, mainTopTabsHeight, mainBottomTabsHeight, menuButtonBarHeight, safeAreaInsetsTop } from "../../utils/system"
	const tabIndex = ref(0)
	const handleChangeTabIndex = (index : number) => {
		tabIndex.value = index
	}

	// 控制推荐、直播tabBar
	const lastScrollTop = ref(0)
	const tabbarTranslateY = ref(0)
	let max = 0
	let min = 0
	onMounted(() => {
		// #ifdef MP-WEIXIN
		tabbarTranslateY.value = safeAreaInsetsTop
		max = safeAreaInsetsTop
		min = safeAreaInsetsTop - uni.upx2px(mainHomeExploreTabsHeight)
		// #endif
		// #ifdef MP-TOUTIAO
		tabbarTranslateY.value = safeAreaInsetsTop
		max = safeAreaInsetsTop
		min = safeAreaInsetsTop - uni.upx2px(mainHomeExploreTabsHeight)
		// #endif
		// #ifdef WEB || APP
		tabbarTranslateY.value = uni.upx2px(0)
		max = uni.upx2px(0)
		min = uni.upx2px(-mainHomeExploreTabsHeight)
		// #endif
		fetchData()
	})
	const handleScroll = (e) => {
		const scrollTop = e.detail.scrollTop
		lastScrollTop.value = scrollTop
		tabbarTranslateY.value = tabbarTranslateY.value + e.detail.deltaY
		if (tabbarTranslateY.value > max) {
			tabbarTranslateY.value = max
		}
		if (tabbarTranslateY.value < min) {
			tabbarTranslateY.value = min
		}
	}

	// tabs更多菜单
	const showEditMoreTabs = ref(false)
	const showTabMenuEdit = () => {
		showEditMoreTabs.value = !showEditMoreTabs.value;
	}

	// 下拉刷新
	const refresherTriggered = ref(false)
	const onRefresherrefresh = () => {
		refresherTriggered.value = true
		setTimeout(() => {
			const temp = dataManager.value[tabIndex.value].data
			dataManager.value[tabIndex.value].data = [...shuffleData(temp)]
			refresherTriggered.value = false
		}, 1000)
	}
	const onRefresherabort = () => {
		setTimeout(() => {
			refresherTriggered.value = false
		}, 2000)
	}

	import { DATA_MAIN_EXPLORE_RECOMMEND } from "../../utils/data"
	import { MainHomeExploreDataItem, MainHomeExploreItemType } from "../../types/main-home-explore-data-item";
	import { deepReactive, shuffleData } from "../../utils/util";
	let dataManager = ref<MainHomeExploreDataItem[]>([]);
	// 获取数据
	const fetchData = () => {
		const dataItemRecommend : MainHomeExploreDataItem = {
			data: reactive(DATA_MAIN_EXPLORE_RECOMMEND),
			type: MainHomeExploreItemType.recommend
		}
		const dataItemLive : MainHomeExploreDataItem = {
			data: reactive(DATA_MAIN_EXPLORE_LIVE),
			type: MainHomeExploreItemType.live
		}
		const dataItemMiniMovie : MainHomeExploreDataItem = {
			data: reactive(DATA_MAIN_EXPLORE_MINIMOVIE),
			type: MainHomeExploreItemType.miniMovie
		}
		dataManager.value = []
		dataManager.value.push(dataItemRecommend)
		dataManager.value.push(dataItemLive)
		dataManager.value.push(dataItemMiniMovie)
	}
</script>
<template>
	<!-- TabBar -->
	<com-tabs-scroll :tabs="DATA_MAIN_EXPLORE_TABS" @change="handleChangeTabIndex" class="com-tabs-scroll"
		:style="{top: `${mainTopTabsHeight()}px`, transform: `translateY(${tabbarTranslateY}px)`}">
		<template #right>
			<uni-icons type="down" size="16" class="expand-arrow" @click="showTabMenuEdit"></uni-icons>
		</template>
	</com-tabs-scroll>
	<scroll-view scroll-y class="scroll-view" :style="mainHomeExploreScrollViewStyle()" @scroll="handleScroll"
		refresher-enabled :show-scrollbar="false" :refresher-triggered="refresherTriggered"
		@refresherrefresh="onRefresherrefresh" @refresherabort="onRefresherabort">
		<!-- 留白 -->
		<view :style="`${mainHomeExplorePlacehoderStyle()}`"></view>
		<!-- 推荐 -->
		<view v-for="(item,index) in dataManager" :key="index">
			<com-grid-item-scroll-view :dataList="item.data"
				v-if="tabIndex == index && item.type == MainHomeExploreItemType.recommend" iconType="icon-l-love"></com-grid-item-scroll-view>
			<com-grid-item-scroll-view :dataList="item.data"
				v-else-if="tabIndex == index && item.type == MainHomeExploreItemType.live" :live="true"
				iconType="icon-geren1"></com-grid-item-scroll-view>
			<com-grid-item-scroll-view :dataList="item.data"
				v-else-if="tabIndex == index && item.type == MainHomeExploreItemType.miniMovie" :miniMovie="true"
				:customFooter="false"></com-grid-item-scroll-view>
		</view>
	</scroll-view>
	<view class="edit-tabs-menu" :style="{top: `${editTabsMenuStyle()}px`}" :class="{'show': showEditMoreTabs}">
		<view class="header">
			<view class="title">
				<text>我的频道</text>
				<text class="sub-title">点击进入频道</text>
			</view>
			<view class="right">
				<view class="into-edit flex-center">进入编辑</view>
				<uni-icons type="up" size="16" class="collapse-arrow" @click="showTabMenuEdit"
					color="#9a9a9a"></uni-icons>
			</view>
		</view>
		<view class="tab-menus">
			<view v-for="item in DATA_MAIN_HOME_MY_TABS_MENU" :key="item">
				<view class="tab-menu">
					{{item}}
				</view>
			</view>
		</view>
		<view class="header">
			<view class="title">
				<text>推荐频道</text>
				<text class="sub-title">点击添加频道</text>
			</view>
		</view>
		<view class="tab-menus">
			<view v-for="item in DATA_MAIN_HOME_MY_TABS_MENU_RECOMMEND" :key="item">
				<view class="tab-menu">
					+ {{item}}
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.com-tabs-scroll {
		position: absolute;
		width: 100vw;
		z-index: 10;
		left: 0;
	}

	.expand-arrow {}

	.edit-tabs-menu {
		width: 100vw;
		position: absolute;
		background-color: white;
		transform: translateY(-100%);
		z-index: 0;
		padding: 20rpx;
		font-size: $font-size-28;
		opacity: 0;

		.header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.title {
				.sub-title {
					font-size: $font-size-20;
					color: $secondary-text-color;
					margin-left: 15rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.into-edit {
					padding: 0 20rpx;
					height: 40rpx;
					background-color: $button-background-color;
					font-size: $font-size-20;
					border-radius: 20rpx;
				}

				.collapse-arrow {
					margin: 0 20rpx;
				}
			}
		}

		.tab-menus {
			display: grid;
			grid-template-columns: repeat(4, 150rpx);
			justify-content: space-between;
			gap: 20rpx;
			padding: 20rpx 0;

			.tab-menu {
				display: inline-block;
				background-color: white;
				width: 150rpx;
				padding: 10rpx 0rpx;
				text-align: center;
				border-radius: 5rpx;
				border: 2rpx solid $border-color;
				font-size: $font-size-24;
				color: $third-text-color;
			}
		}
	}

	.edit-tabs-menu.show {
		transform: translate(0);
		transition: 0.14s all ease;
		opacity: 1;
		z-index: 15;
	}
</style>